.mt1 {
    margin-top: 1px;
}

.mt24 {
    margin-top: 24px;
}

.mr24 {
    margin-right: 24px;
}

.ml24 {
    margin-left: 24px;
}

.pt24 {
    padding-top: 24px;
}

.pr24 {
    padding-right: 24px;
}

.pb24 {
    padding-bottom: 24px;
}

.pl24 {
    padding-left: 24px;
}

.pt88 {
    padding-top: 88px;
}

.mlr24 {
    margin-left: 24px;
    margin-right: 24px;
}

.ptb24 {
    padding-top: 24px;
    padding-bottom: 24px;
}

.plr24 {
    padding-left: 24px;
    padding-right: 24px;
}

.p20 {
    padding: 20upx;
}

.p24 {
    padding: 24upx;
}

.p30 {
    padding: 30upx;
}

.p40 {
    padding: 40upx;
}

.pw100 {
    width: 100%;
}

.ph100 {
    height: 100%;
}




@for $i from 1 through 30 {
    .mt#{$i*10} {
        margin-top: $i * 10px;
    }

    .pt#{$i*10} {
        padding-top: $i * 10px;
    }

    .pb#{$i*10} {
        padding-bottom: $i * 10px;
    }
}

@for $i from 1 through 20 {
    .pl#{$i*10} {
        padding-left: $i * 10px;
    }

    .pr#{$i*10} {
        padding-right: $i * 10px;
    }

    .mb#{$i*10} {
        margin-bottom: $i * 10px;
    }

    .ml#{$i*10} {
        margin-left: $i * 10px;
    }

    .mr#{$i*10} {
        margin-right: $i * 10px;
    }

    .mlr#{$i*10} {
        margin-left: $i * 10px;
        margin-right: $i * 10px;
    }

    .mtb#{$i*10} {
        margin-top: $i * 10px;
        margin-bottom: $i * 10px;
    }

    .ptb#{$i*10} {
        padding-top: $i * 10px;
        padding-bottom: $i * 10px;
    }

    .plr#{$i*10} {
        padding-left: $i * 10px;
        padding-right: $i * 10px;
    }
}